<template>
 <div class="yingmoo-media">
   <ym-header></ym-header>
   <ym-medianav></ym-medianav>
   <ym-secondnav></ym-secondnav>
   
<!--  广告轮播  -->
    <div class="ym-lunbo">
      <el-carousel indicator-position="inside">
        <el-carousel-item v-for="(v,i) in banners" :key="i">
          <img :src="v.imgpath" />
        </el-carousel-item>
      </el-carousel>
    </div>
<!--  优质地铁媒体  -->
    <div class="yingmoo-template">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">优质地铁媒体</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
      </div>
      <div class="column-content">
      	<ul>
      		<li style="float: left; margin: 8px;" class="media-model" v-for="n in list1" :key="n">
      			<dl>
		          <dt>
		            <img width="222px" height="198px" :src="n.imgpath" />
		          </dt>
		          <dd class="media-text-first" :title='n.name'>{{n.name}}</dd>
		          <dd class="media-text-secend">￥{{n.price}}</dd>
		          <dd class="media-text-city"><span>{{n.remark}}</span></dd>
		        </dl>
      		</li>
      	</ul>
      </div>
    </div>
<!--  一、二线城市  -->
    <div class="yingmoo-metro-city">
      <div class="first-tier-cities">
        <div class="column-navbar grey">
          <h1 class="column-title">
            <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
            <span class="column-name">一线城市</span>
            <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
          </h1>
          <p class="column-citys">
            <span>北京</span>
            <span>上海</span>
            <span>广州</span>
            <span>深圳</span>
          </p>
        </div>
        <div class="column-center">
          <img v-for="v in list2" class="metro-images1"  width="184px" height="428px" :src="v.imgpath" :key="v"/>
          <div class="column-center-model">
            <div class="center-model" v-for="v in list3" :key="v">
              <img width="184px" height="164px" :src="v.imgpath" />
              <p :title='v.name'>
                {{v.name}}
              </p>
            </div>
          </div>
        </div>

        <div class="column-last-model">
          <div class="center-model" v-for="v in list4" :key="v">
            <img  width="184px" height="164px" :src="v.imgpath" />
            <p :title='v.name'>
              {{v.name}}
            </p>
          </div>
        </div>
      </div>
      <div class="section-tier-cities">
        <div class="column-navbar grey">
          <h1 class="column-title">
            <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
            <span class="column-name">二线城市</span>
            <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
          </h1>
          <p class="column-citys">
            <span>成都</span>
            <span>重庆</span>
            <span>南京</span>
            <span>天津</span>
            <span>武汉</span>
            <span>西安</span>
          </p>
        </div>
        <div class="column-center">
          <img class="metro-images1" v-for="v in list5" :key="v" width="184px" height="428px" :src="v.imgpath" />
          <div class="column-center-model">
            <div class="center-model" v-for="n in list6" :key="n">
              <img width="184px" height="164px" :src="n.imgpath" />
              <p :title='n.name'>
                {{n.name}}
              </p>
            </div>
          </div>
        </div>
        <div class="column-last-model">
          <div class="center-model" v-for="v in list7" :key="v">
            <img  width="184px" height="164px" :src="v.imgpath" />
            <p :title='v.name'>
              {{v.name}}
            </p>
          </div>
        </div>
      </div>
    </div>
<!--  地铁站内媒体  -->
    <div class="yingmoo-metro-station">
      <div class="first-tier-cities">
        <div class="column-navbar grey">
          <h1 class="column-title">
            <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
            <span class="column-name">地铁站媒体</span>
            <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
          </h1>
          <p class="column-citys">
            <span>灯箱</span>
            <span>墙贴</span>
            <span>屏蔽门贴</span>
            <span>扶梯</span>
            <span>电视</span>
            <span>梯顶</span>
          </p>
        </div>
        <div class="column-center">
          <img v-for="n in list8" :src="n.imgpath"  :key="n" width="390px" height="428px" class="metro-images1" />
          <div class="column-center-model">
            <div class="center-model" v-for="v in list9" :key="v">
              <img width="184px" height="164px" :src="v.imgpath" />
              <p :title='v.name'>
                {{v.name}}
              </p>
            </div>
          </div>
        </div>
        <div class="column-last-model">
          <div class="center-model" v-for="v in list10" :key="v">
            <img width="184px" height="164px" :src="v.imgpath" />
            <p :title='v.name'>
              {{v.name}}
            </p>
          </div>
        </div>
      </div>
      <div class="section-tier-cities">
        <div class="column-navbar grey">
          <h1 class="column-title">
            <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
            <span class="column-name">地铁内媒体</span>
            <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
          </h1>
          <p class="column-citys">
            <span>拉手</span>
            <span>门贴窗</span>
            <span>电视</span>
            <span>海报</span>
            <span>创意包车</span>
            <span>品牌列车</span>
          </p>
        </div>
        <div class="column-center">
          <img v-for="n in list11" :key="n" width="390px" height="428px" :src="n.imgpath" class="metro-images1" />
          <div class="column-center-model">
            <div class="center-model" v-for="v in list12" :key="v">
              <img width="184px" height="164px" :src="v.imgpath" />
              <p :title='v.name'>
                {{v.name}}
              </p>
            </div>
          </div>
        </div>
        <div class="column-last-model">
          <div class="center-model" v-for="v in list13" :key="v">
            <img width="184px" height="164px" :src="v.imgpath" />
            <p :title='v.name'>
              {{v.name}}
            </p>
          </div>
        </div>
      </div>
    </div>
<!--  客户案例  -->
    <div class="yingmoo-clientele-template">
      <div class="column-navbar grey">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">客户案例</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
      </div>
      <div class="column-center">
        <div class="column-center-model">
          <div class="center-model" v-for="v in list14" :key="v">
            <img width="222px" height="198px" :src="v.imgpath" />
            <p :title='v.name'>
              {{v.name}}
            </p>
          </div>
        </div>
      </div>
    </div>
    <ym-footer></ym-footer>
 </div>
</template>
<script>
import ymHeader from "@/components/ymHeader.vue";
import ymMedianav from "@/components/ymMedianav.vue";
import ymFooter from "@/components/ymFooter.vue";
import ymSecondnav from "@/components/ymSecondnav.vue";
export default {
  name: "yingmoo-media",
  components: {
    ymHeader,
    ymMedianav,
    ymSecondnav,
    ymFooter
  },
  data() {
    return {
      requestAddr: this.GLOBAL.addr,
      /* banner数据，方便修改 */
      banners: [
        {
          imgUrl: require("@/assets/ym-media/metro-lunbo.png")
        },
        {
          imgUrl: require("@/assets/ym-media/metro-lunbo.png")
        },
        {
          imgUrl: require("@/assets/ym-media/metro-lunbo.png")
        }
      ],
      model: [
        {
          modeltext: "媒体名称媒体名称媒体名称",
          modelmoney: "价格：120万 元/年",
          modelcity: "北京西站",
          modellook: "看板"
        },
        {
          modeltext: "媒体名称媒体名称媒体名称",
          modelmoney: "价格：120万 元/年",
          modelcity: "北京西站",
          modellook: "看板"
        },
        {
          modeltext: "媒体名称媒体名称媒体名称",
          modelmoney: "价格：120万 元/年",
          modelcity: "北京西站",
          modellook: "看板"
        },
        {
          modeltext: "媒体名称媒体名称媒体名称",
          modelmoney: "价格：120万 元/年",
          modelcity: "北京西站",
          modellook: "看板"
        },
        {
          modeltext: "媒体名称媒体名称媒体名称",
          modelmoney: "价格：120万 元/年",
          modelcity: "北京西站",
          modellook: "看板"
        }
      ],
      metro: [
        {
          metrotext: "深圳地铁6号线超级媒体广告展示"
        },
        {
          metrotext: "深圳地铁6号线超级媒体广告展示"
        },
        {
          metrotext: "深圳地铁6号线超级媒体广告展示"
        },
        {
          metrotext: "深圳地铁6号线超级媒体广告展示"
        }
      ],
      metromodel: [
        {
          metromodeltext: "深圳地铁6号线超级媒体广告展示"
        },
        {
          metromodeltext: "深圳地铁6号线超级媒体广告展示"
        },
        {
          metromodeltext: "深圳地铁6号线超级媒体广告展示"
        }
      ],
      metrostation: [
        {
          stationmodeltext: "深圳地铁6号线超级媒体广告展示"
        },
        {
          stationmodeltext: "深圳地铁6号线超级媒体广告展示"
        }
      ],
      clientele: [
        {
          clienteletext: "媒体名称媒体名称媒体名称"
        },
        {
          clienteletext: "媒体名称媒体名称媒体名称"
        },
        {
          clienteletext: "媒体名称媒体名称媒体名称"
        },
        {
          clienteletext: "媒体名称媒体名称媒体名称"
        },
        {
          clienteletext: "媒体名称媒体名称媒体名称"
        }
      ],
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      list5: [],
      list6: [],
      list7: [],
      list8: [],
      list9: [],
      list10: [],
      list11: [],
      list12: [],
      list13: [],
      list14: []
    };
  },
  mounted() {
    this.getList(39, 3); //轮播
    this.getList(40, 10); //优质地铁媒体
    this.getList(41, 1); //一线-推荐
    this.getList(42, 4); //一线-右侧图
    this.getList(43, 3); //一线底部
    this.getList(44, 1); //二线-推荐
    this.getList(45, 4); //二线-右侧
    this.getList(46, 3); //二线底部
    this.getList(47, 1); //站内一
    this.getList(48, 2);
    this.getList(49, 3);
    this.getList(50, 1); //站内二
    this.getList(51, 2);
    this.getList(52, 3);
    this.getList(53, 5); //客户案例
  },
  methods: {
    getList: function(adid, limit) {
      this.$http({
        url:
          this.requestAddr +
          "/GetJson/get/adshow?adid=" +
          adid +
          "&limit=" +
          limit,
        method: "JSONP",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        jsonp: "callbackparam"
      })
        .then(res => {
          /*console.log(res.data);*/
          if (res.data != null) {
            if (adid == 39) {
              this.banners = res.data;
            }
            if (adid == 40) {
              this.list1 = res.data;
            }
            if (adid == 41) {
              this.list2 = res.data;
            }
            if (adid == 42) {
              this.list3 = res.data;
            }
            if (adid == 43) {
              this.list4 = res.data;
            }
            if (adid == 44) {
              this.list5 = res.data;
            }
            if (adid == 45) {
              this.list6 = res.data;
            }
            if (adid == 46) {
              this.list7 = res.data;
            }
            if (adid == 47) {
              this.list8 = res.data;
            }
            if (adid == 48) {
              this.list9 = res.data;
            }
            if (adid == 49) {
              this.list10 = res.data;
            }
            if (adid == 50) {
              this.list11 = res.data;
            }
            if (adid == 51) {
              this.list12 = res.data;
            }
            if (adid == 52) {
              this.list13 = res.data;
            }
            if (adid == 53) {
              this.list14 = res.data;
            }
          }
        })
        .catch();
    }
  }
};
</script>

<style scoped lang="less">
.yingmoo-media {
  width: 100%;
  background-color: #f3f9ff;
  .ym-lunbo {
    width: 100%;
    height: 450px;
    position: absolute;
    top: 234px;
    left: 0;
    z-index: 1;
  }
  .yingmoo-template {
    width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
    .column-navbar {
      height: 44px;
      line-height: 44px;
      position: relative;
      &.grey {
        background-color: #e6e6e6;
      }
      .column-title {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 247px;
        color: #fbb03b;
        font-size: 18px;
        background-color: #036eb7;
        .column-icon {
          margin-left: 26px;
        }
        .column-arrow {
          position: absolute;
          right: -26px;
          top: 0;
        }
      }
    }
    .column-content {
      width: 1200px;
      background-color: transparent;
      display: flex;
      justify-content: space-between;
      .media-model {
        width: 224px;
        height: 291px;
        margin-top: 20px;
        dd {
          background-color: white;
          height: 24px;
          line-height: 24px;
          padding-left: 10px;
        }
        .media-text-first {
          font-size: 14px;
          padding-top: 9px;
          overflow: hidden;
          text-overflow: clip;
        }
        .media-text-secend {
          font-size: 12px;
          color: red;
        }
        .media-text-city {
          font-size: 12px;

          color: #999999;
          padding-bottom: 6px;
        }
      }
    }
  }
  .yingmoo-metro-city {
    width: 1200px;
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .first-tier-cities {
      width: 597px;
      height: 715px;
      .column-navbar {
        height: 44px;
        line-height: 44px;
        position: relative;
        &.grey {
          background-color: #e6e6e6;
        }
        .column-title {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 170px;
          color: #fbb03b;
          font-size: 18px;
          background-color: #036eb7;
          .column-icon {
            margin-left: 26px;
          }
          .column-arrow {
            position: absolute;
            right: -26px;
            top: 0;
          }
        }
        .column-citys {
          line-height: 44px;
          width: 260px;
          background: none;
          color: #999999;
          float: right;
          span {
            padding-left: 15px;
            padding-right: 15px;
            font-size: 14px;
          }
        }
      }
      .column-center {
        width: 100%;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        .metro-images1 {
          width: 184px;
        }
        .column-center-model {
          width: 390px;
          height: 428px;
          :nth-child(odd) {
            float: left;
          }
          :nth-child(even) {
            float: right;
          }
          :nth-child(3) {
            margin-top: 21px;
          }
          :nth-child(4) {
            margin-top: 21px;
          }
          .center-model {
            width: 184px;
            height: 203px;
            background-color: white;
            overflow: hidden;
            p {
              width: 184px;
              overflow: hidden;
              text-overflow: clip;
              line-height: 35px;
              text-align: center;
              font-size: 14px;
              color: #494949;
            }
          }
        }
      }
      .column-last-model {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        .center-model {
          width: 184px;
          height: 203px;
          background-color: white;
          overflow: hidden;
          p {
            overflow: hidden;
            text-overflow: clip;
            line-height: 35px;
            text-align: center;
            font-size: 14px;
            color: #494949;
          }
        }
      }
    }
    .section-tier-cities {
      width: 597px;
      height: 715px;
      .column-navbar {
        height: 44px;
        line-height: 44px;
        position: relative;
        &.grey {
          background-color: #e6e6e6;
        }
        .column-title {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 170px;
          color: #fbb03b;
          font-size: 18px;
          background-color: #036eb7;
          .column-icon {
            margin-left: 26px;
          }
          .column-arrow {
            position: absolute;
            right: -26px;
            top: 0;
          }
        }
        .column-citys {
          line-height: 44px;
          width: 300px;
          background: none;
          color: #999999;
          float: right;
          span {
            padding-left: 8px;
            padding-right: 8px;
            font-size: 14px;
          }
        }
      }
      .column-center {
        width: 100%;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        .metro-images1 {
          width: 184px;
        }
        .column-center-model {
          width: 390px;
          height: 428px;
          :nth-child(odd) {
            float: left;
          }
          :nth-child(even) {
            float: right;
          }
          :nth-child(3) {
            margin-top: 21px;
          }
          :nth-child(4) {
            margin-top: 21px;
          }
          .center-model {
            width: 184px;
            height: 203px;
            background-color: white;
            overflow: hidden;
            p {
              width: 184px;
              overflow: hidden;
              text-overflow: clip;
              line-height: 35px;
              text-align: center;
              font-size: 14px;
              color: #494949;
            }
          }
        }
      }
      .column-last-model {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        .center-model {
          width: 184px;
          height: 203px;
          background-color: white;
          overflow: hidden;
          p {
            width: 184px;
            overflow: hidden;
            text-overflow: clip;
            line-height: 35px;
            text-align: center;
            font-size: 14px;
            color: #494949;
          }
        }
      }
    }
  }
  .yingmoo-metro-station {
    width: 1200px;
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .first-tier-cities {
      width: 597px;
      height: 715px;
      .column-navbar {
        height: 44px;
        line-height: 44px;
        position: relative;
        &.grey {
          background-color: #e6e6e6;
        }
        .column-title {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 170px;
          color: #fbb03b;
          font-size: 18px;
          background-color: #036eb7;
          .column-icon {
            margin-left: 25px;
          }
          .column-arrow {
            position: absolute;
            right: -25px;
            top: 0;
          }
        }
        .column-citys {
          line-height: 44px;
          width: 350px;
          background: none;
          color: #999999;
          float: right;
          span {
            padding-left: 10px;
            padding-right: 10px;
            font-size: 14px;
          }
        }
      }
      .column-center {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .metro-images1 {
          width: 390px;
          height: 428px;
          margin-top: 20px;
        }
        .column-center-model {
          width: 184px;
          height: 428px;
          .center-model {
            width: 184px;
            height: 203px;
            background-color: white;
            margin-top: 21px;
            overflow: hidden;
            p {
              width: 184px;
              overflow: hidden;
              text-overflow: clip;
              line-height: 35px;
              text-align: center;
              font-size: 14px;
              color: #494949;
            }
          }
        }
      }
      .column-last-model {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        .center-model {
          width: 184px;
          height: 203px;
          background-color: white;
          overflow: hidden;
          p {
            width: 184px;
            overflow: hidden;
            text-overflow: clip;
            line-height: 35px;
            text-align: center;
            font-size: 14px;
            color: #494949;
          }
        }
      }
    }
    .section-tier-cities {
      width: 597px;
      height: 715px;
      .column-navbar {
        height: 44px;
        line-height: 44px;
        position: relative;
        &.grey {
          background-color: #e6e6e6;
        }
        .column-title {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          width: 170px;
          color: #fbb03b;
          font-size: 18px;
          background-color: #036eb7;
          .column-icon {
            margin-left: 25px;
          }
          .column-arrow {
            position: absolute;
            right: -25px;
            top: 0;
          }
        }
        .column-citys {
          line-height: 44px;
          width: 350px;
          background: none;
          color: #999999;
          float: right;
          &:nth-child(2) {
            width: 390px;
          }
          span {
            padding-left: 10px;
            padding-right: 10px;
            font-size: 14px;
          }
        }
      }
      .column-center {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .metro-images1 {
          width: 390px;
          height: 428px;
          margin-top: 20px;
        }
        .column-center-model {
          width: 184px;
          height: 428px;
          .center-model {
            width: 184px;
            height: 203px;
            background-color: white;
            margin-top: 21px;
            overflow: hidden;
            p {
              width: 184px;
              overflow: hidden;
              text-overflow: clip;
              line-height: 35px;
              text-align: center;
              font-size: 14px;
              color: #494949;
            }
          }
        }
      }
      .column-last-model {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        .center-model {
          width: 184px;
          height: 203px;
          background-color: white;
          overflow: hidden;
          p {
            width: 184px;
            overflow: hidden;
            text-overflow: clip;
            line-height: 35px;
            text-align: center;
            font-size: 14px;
            color: #494949;
          }
        }
      }
    }
  }
  .yingmoo-clientele-template {
    width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
    .column-navbar {
      height: 44px;
      line-height: 44px;
      position: relative;
      &.grey {
        background-color: #e6e6e6;
      }
      .column-title {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 247px;
        color: #fbb03b;
        font-size: 18px;
        background-color: #036eb7;
        .column-icon {
          margin-left: 26px;
        }
        .column-arrow {
          position: absolute;
          right: -26px;
          top: 0;
        }
      }
    }
    .column-center {
      .column-center-model {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        .center-model {
          width: 222px;
          height: 240px;
          background-color: white;
          overflow: hidden;
          p {
            width: 222px;
            text-overflow: clip;
            overflow: hidden;
            line-height: 35px;
            text-align: center;
            font-size: 14px;
            color: #494949;
          }
        }
      }
    }
  }
}
</style>
